<template>
	<i-popup @confirm="logout" v-if="showConfirm" :closeData="{title: '取消', show: true}"
		:confirmData="{title: '确认注销'}" @close="showConfirm = false">
		<view class="popup_text">确认要注销账号吗？</view>
	</i-popup>
	<view class="off_user">
		<i-card top="20rpx" padding="40rpx 32rpx 64rpx 32rpx" v-if="step === 0">
			<view class="off_title">
				<text class="title">注销账号</text>
				<text class="off_number">将 {{mobileEncryption(userInfo.mobile)}} 所绑定的账号注销</text>
				<text>注销账号为不可恢复操作，注销账号后你将无法找回本账号，及本账号相关的内容与信息</text>
			</view>
			<view class="off_body">
				<text class="body_title">在你注销友电之星养车账号前，请认真阅读、理解并同意以下内容</text>
				<view class="off_item">
					<text class="item_title">1. 注销账号需满足以下条件</text>
					<text>· 账号状态为正常</text>
					<text>· 附近车店商家暂不支持注销，如需注销请联系客服处理</text>
				</view>
				<view class="off_item">
					<text class="item_title">2. 注销账号后你将无法找回本账号及账号相关的任何内容与信息，包括但不限于</text>
					<text>· 账号内个人资料、加油、车店、商城订单、优惠金、账号余额及商家店铺</text>
				</view>
				<view class="off_item">
					<text class="item_title">3. 注销账号不代表注销账号前的行为相关责任得到豁免或减轻</text>
				</view>
			</view>
			<i-buttons :disabled="disabled" radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E"
				@click="step = 1">我理解并同意，仍要注销 <text v-if="timer">（{{timer}}s）</text></i-buttons>
		</i-card>
		<i-card top="20rpx" padding="40rpx 32rpx 64rpx 32rpx" v-if="step === 1">
			<view class="title">账号相关信息</view>
			<view class="next_title">继续注销流程，以下相关数据随账号一并删除，且无法找回</view>
			<view class="lines"></view>
			<view class="next_form">
				<view class="next_item">
					<text class="next_text">优惠金</text>
					<text>{{userInfo.accountAmount}}</text>
				</view>
				<view class="next_item">
					<text class="next_text">我的余额</text>
					<text>{{priceInfo.brokerageAmount}}</text>
				</view>
				<view class="next_item">
					<text class="next_text">特权用户</text>
					<text>{{fansInfo.totalEffectiveSubordinate}}人</text>
				</view>
				<view class="next_item">
					<text class="next_text">总粉丝</text>
					<text>{{fansInfo.totalSubordinate}}人</text>
				</view>
			</view>
			<i-buttons radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E" @click="nextClick">下一步
			</i-buttons>
		</i-card>
		<i-card top="20rpx" padding="40rpx 32rpx 64rpx 32rpx" v-if="step === 2">
			<view class="title">账号验证</view>
			<view class="next_title">验证码已发送至 {{mobileEncryption(userInfo.mobile)}}</view>
			<i-verification type="logOut" :autoCode="autoCode" v-model="formData.smsCode" :mobile="userInfo.mobile" color="#a0a0a0"></i-verification>
			<view style="height: 40rpx;"></view>
			<i-buttons radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E" @click="chckMobile">下一步
			</i-buttons>
		</i-card>
		<i-card top="20rpx" padding="40rpx 32rpx 64rpx 32rpx" v-if="step === 3">
			<view class="title">确认注销</view>
			<view class="card_text">为防止误操作，请再次确认是否注销账号，并确认注销后影响</view>
			<view style="height: 40rpx;"></view>
			<view class="card_text">我们对您的注销决定深表遗憾，最后善意的提醒您，注销账号为不可恢复的行为</view>
			<view style="height: 40rpx;"></view>
			<i-buttons radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E"
				@click="showConfirm = true">确认注销
			</i-buttons>
			<view style="height: 32rpx;"></view>
			<i-buttons radius="4" padding="18rpx 0" size="32" @click="navTo('', 'navigateBack')">放弃</i-buttons>
		</i-card>
		<i-card top="20rpx" padding="40rpx 32rpx 64rpx 32rpx" v-if="step === 4">
			<view class="step4">
				<view class="title" style="font-size: 32rpx;">注销账号申请成功</view>
				<view style="height: 40rpx;"></view>
				<text class="card_text tx">您的账号将于 {{getTimeFormat(new Date(),'yyyy/MM/dd HH:mm')}} 完成注销。请注意，该账号注销有 7
					天的冷静期，我们将在冷静期满后完成注销，删除或匿名化处理您的账号信息</text>
				<view style="height: 40rpx;"></view>
				<view class="card_text">在此期间，请不要登录该账号，以确保注销的顺利完成。如在冷静期内再次登录该账号将视为您撤销注销申请</view>
				<view style="height: 40rpx;"></view>
				<i-buttons radius="4" padding="18rpx 288rpx" size="32" color="#fff" bgColor="#FB652E"
					@click="close_user">完成
				</i-buttons>
			</view>
		</i-card>
	</view>
</template>

<script lang="ts" setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		navTo,
		mobileEncryption,
		checkForm,
		showTost,
		getTimeFormat
	} from '../../utils/common'
	import useStore from '../../stores/index'
	import {
		getFansPageInfo,
	} from '../../api/index'
	import {
		checkLogOutSmsCode,
		submitLogout,
		getAccountBrokerageAmount
	} from '../../api/user'
	import {
		smsCodeReg
	} from '../../utils/regs'

	const store = useStore()
	const timer = ref(15)
	const step = ref(0)
	const disabled = ref(true)
	const showConfirm = ref(false)
	const autoCode = ref(false)
	const step_check = ref(true)
	
	
	const fansInfo = ref < any > ({})
	const priceInfo = ref < any > ({})
	
	const formData = reactive({
		"mobile": "",
		"smsCode": ''
	})

	const userInfo = computed(() => {
		formData.mobile = store.userInfo.mobile
		return store.userInfo
	})

	const storeInfo = computed(() => {
		return store.storeInfo
	})
	
	const interval = setInterval(() => {
		timer.value--
		if (timer.value <= 0) {
			clearInterval(interval)
			disabled.value = false
		}
	}, 1000)
	
	const nextClick = () => {
		if (step_check.value) {
			step_check.value = false
			step.value = 2
			autoCode.value = true
		}
	}
	
	const close_user = () => {
        navTo('/pages/index/index', 'switchTab')
	}
	const chckMobile = async() => {
		const flag = checkForm(formData, ['mobile'], {
			smsCode: {
				reg: smsCodeReg,
				message: '请输入6位验证码'
			}
		})
		if (flag) {
			return
		}
	 	const {data} = await checkLogOutSmsCode(formData.smsCode)
		if (data) {
			step.value = 3
			return
		}
		showTost('验证码错误或已过期')
		
	}
	const getInitData = async() => {
		 const [{data: fans}, {data: priceAll}] = await Promise.all([await getFansPageInfo(),await getAccountBrokerageAmount()])
		 	fansInfo.value = fans
			priceInfo.value = priceAll
			
	}
	
	
	getInitData()

	const logout = async() => {
		try {
			await submitLogout(formData)
			showConfirm.value = false
			step.value = 4
			store.loginOut()
		} catch (err) {
			showConfirm.value = false
		}
	}
</script>

<style lang="scss" scoped>
	.off_user {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.off_title {
			@include flexC;
			@include titlefont(28rpx);
			border-bottom: 1rpx solid $backColor;
			padding-bottom: 40rpx;
			white-space: normal;


			.off_number {
				@include dfont(26rpx);
				margin-bottom: 40rpx;
			}
		}

		.off_body {
			@include flexC;
			@include dfont(26rpx);

			.body_title {
				margin: 40rpx 0;
			}

			.off_item {
				@include flexC;
				margin-bottom: 40rpx;

				text {
					margin-bottom: 8rpx;
				}

				.item_title {
					@include titlefont(28rpx);
					white-space: normal;
				}
			}
		}

		.title {
			@include titlefont(40rpx);
			margin-bottom: 20rpx;
		}

		.next_title {
			@include titlefont(26rpx);
			white-space: normal;
			padding-bottom: 40rpx;
		}

		.lines {
			width: 100%;
			height: 1rpx;
			background-color: $backColor;
		}

		.next_form {
			@include flexC;
			margin-top: 40rpx;

			.next_item {
				margin-bottom: 32rpx;
				@include flexR;
				@include dfont(26rpx);

				.next_text {
					width: 32%;
					color: #A0A0AD;
				}

			}
		}

		.card_text {
			@include dfont(26rpx);
		}

		.step4 {
			@include flexCC;
		}
	}

	.popup_text {
		padding: 48rpx 0;
		text-align: center;
		@include titlefont(32rpx);
	}

	.tx {
		font-weight: bold !important;
	}
</style>
